import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {Modal,Table, Form, Row, Col, Input, Button} from 'antd';
import {ModalForm, ListBox} from '../../components'
import {fetchData} from '../../components/AjaxConsumer'
import styles from './index_ad.scss'

const confirm = Modal.confirm;
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
export default class PrintInfoPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            data: null,
        };

        //行操作列表
        this.rowOperation = [
        ];
        //header 操作列表
        this.headerOperation = [
        ];
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    rowHandles = (strHandles, rowObj) => {
        //listBox组件内未做函数不存在的判断，需定义空函数
    };
    printHandle = (rowObj) => {
        //根据对象的Id 属性获取对象信息
        let semifinishedOutId = rowObj[0].data.orderNo;
        //查询条件整理
        const options = {
            url: '/product/checkin/codeCreate/printInfoList?orderNo='+checkInId,
            type: 'get',
            condition: {}
        };
        //发起请求
        fetchData(this, options, (res) => {
            //回调函数
            const pagination = { ...this.state.pagination };
            pagination.total = res.data.totalCount;
            console.log(res.data);
            this.setState({
                visible: true,
                data: res.data,
                pagination
            });
            JsBarcode(this._barcodeSVG, this.state.data[0].orderNo,
                {
                    format: 'CODE39',
                    displayValue: false,  //  不显示原始值
                    background: '#ffffff',  //  背景色
                    lineColor: '#000000', // 线条颜色
                    width: 2,  // 线条宽度
                    height: 50
                }
            );
        })
    };
    handleOk = () => {
        this.hideModal();
    };

    handleCancel = () => {
        this.hideModal();
    };
    handlePrint = () => {
        $("#printImg,#backImg").css("display","none");
        window.print();
        $("#printImg,#backImg").css("display","");
        // return false;
        // let html_str = document.getElementById('startprint').innerHTML;
        // window.document.body.innerHTML = html_str;
        // window.print();
        // $("#printImg,#backImg").css("display","none");
        // let winname = window.open('', "_blank",'');
        // let bdhtml=document.getElementById('startprint').innerHTML;
        // winname.document.body.innerHTML=bdhtml;
        // winname.print();
        // $("#printImg,#backImg").css("display","");
    };
    render() {
        //table列表展示列配置
        //storageKey 本地存储的key
        //showName、columnName 必有属性， columnWidth 可选，默认100, columnHidden: true 列隐藏（用于列配置显示隐藏）, foreverHidden: true 列永久隐藏
        const columns = [
            {
                title: '出库单号',
                dataIndex: 'orderNo'
            },{
                title: '物料号',
                dataIndex: 'materialCode'
            },{
                title: '物料描述',
                dataIndex: 'materialDesc'
            },{
                title: '单位',
                dataIndex: 'unit'
             }
             ,{
                title: '需求数量',
                dataIndex: 'amount'
            },{
                title: '发货数量',
                dataIndex: 'deliveryAmount'
            }
        ]
        let isHideLeft = this.props.isHideLeft;
        return(
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'100%'}
                closable={false}
                key={Math.random()}
                footer={null}
                className={styles.print_modal}
            >
           <div id="startprint" style={{ fontSize: 22, marginLeft: 50,color: 'black' }} className="ad" >
               <div style={{ marginTop: 80 }}>
                    <Row type="flex" justify="center" align="top">
                        <Col span={3}><DemoBox value={50}>&nbsp;</DemoBox></Col>
                        <Col span={5} style={{ position: 'relative', top: '-70px' }}><DemoBox value={200}
                        >
                            <svg ref={(ref) => this._barcodeSVG = ref} />
                        </DemoBox></Col>
                        <Col span={5}>智能电子调拨出库单据</Col>
                        <Col span={3}></Col>
                        <Col span={3}><DemoBox value={200}>&nbsp;</DemoBox></Col>
                        <Col span={5}><DemoBox
                            value={1000}>{this.state.data ? this.state.data[0].orderNo : ''}</DemoBox></Col>
                    </Row>
                </div>
                {/* <div style={{ marginTop: 2.5 }}>
                        <Row type="flex" justify="center" align="top">
                            <Col span={3}> </Col>
                            <Col span={5}> </Col>
                            <Col span={4}> 
                            <DemoBox
                                value={80}>{this.state.data ? '智能电子调拨出库单据' : ''}</DemoBox></Col>
                            <Col span={4}><DemoBox
                                value={80}>{this.state.data ? this.state.data[0].userDefined1 : ''}</DemoBox> </Col>
                            <Col span={3}>&nbsp;</Col>
                            <Col span={5}></Col>
                        </Row>
                </div> */}
                <div style={{ marginTop: 25.5 }}>
                        <Row type="flex" justify="start">
                            <Col span={3}></Col>
                            <Col span={5}><DemoBox value={80}>{this.state.data ? '出库工厂' : ''}</DemoBox></Col>
                            <Col span={3}></Col>
                            <Col span={5}><DemoBox
                                value={80}>{this.state.data ? this.state.data[0].factoryCode : ''}</DemoBox></Col>
                            <Col span={3}>&nbsp;</Col>
                            <Col span={5}>
                            <DemoBox
                                value={80}>{this.state.data ? this.state.data[0].originalStorageLocation  : ''}</DemoBox></Col>
                        </Row>
                    </div>
                    {/* <div style={{ marginTop: 25.5 }}>
                        <Row type="flex" justify="start">
                            <Col span={3}>&nbsp;</Col>
                            <Col span={21}><DemoBox
                                value={80}>{this.state.data ? this.state.data[0].originalStorageLocation : ''}</DemoBox></Col>
                        </Row>
                    </div> */}
                {/* <div style={{ marginTop: 2.5 }}>
                    <Row type="flex" justify="start">
                        <Col span={3}> </Col>
                       
                        <Col span={9}> </Col>
                        <Col span={4}> </Col>
                        <Col span={3}>&nbsp;</Col>
                        <Col span={5}><DemoBox
                            value={80}>{this.state.data ? this.state.data[0].orderOutType : ''}</DemoBox></Col>
                    </Row>
                </div> */}
                <div style={{ marginTop: 45.5 }}>
                    <Row type="flex" justify="start">
                        <Col span={3}></Col>
                        <Col span={5}><DemoBox
                            value={80}>{this.state.data ? '目标工厂' : ''}</DemoBox></Col>
                        <Col span={3}></Col>
                        <Col span={5}><DemoBox
                            value={80}>{this.state.data ? this.state.data[0].targetFactory  : ''}</DemoBox></Col>
                        <Col span={3}>&nbsp;</Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data ? this.state.data[0].targetStorageLocation : ''}</DemoBox></Col>
                    </Row>
                </div>
            <Table
                style={{ marginTop: '80px' }}
                className={styles.noborer_table}
                rowKey={record => record.proDbOutId}
                columns={columns}
                dataSource={this.state.data}
                bordered={false}
            >
            </Table>
            <div style={{ marginTop: 25.5 }}>
                <Row type="flex" justify="start">
                    <Col span={3}></Col>
                    <Col span={5}></Col>
                    <Col span={4}></Col>
                    <Col span={4}></Col>
                    <Col span={3}>&nbsp;</Col>
                    <Col span={5}><Button key="submit" type='primary' id='printImg' size="large" onClick={this.handlePrint}>打印</Button>&nbsp;
                    <Button key="back" type='primary' id='backImg' size="large" onClick={this.handleCancel}>返回</Button></Col>
                </Row>
            </div>            
        </div>
        </Modal>
        )
    }
}